<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="chatBox"> <!--聊天框-->
        <div id="title">聊天室</div><!--群昵称-->

        <div id="body"> <!--主体-->
            <div id="leftBody"> <!--左边-->
                <div id="content"> <!--聊天内容区-->
                    <ol>
                    </ol>
                </div>

                <div id="inputBox"> <!--聊天输入框-->
                    <textarea id="input"></textarea>
                    <a id="send">发送</a>
                </div>
            </div>

            <div id="rightBody"> <!--右边-->
                <div id="total"></div> <!--群成员总计-->
                <div id="list"> <!-- 群成员名单 -->
                    <ol>
                        <li>
                            <div class="avatar"> <!-- 群成员头像 -->
                                <img src="http://img.wxcha.com/m00/98/e2/1defb6b4d898a94b8832287e503a0153.jpg">
                            </div>
                            <div class="nickname">高博</div> <!-- 群成员昵称 -->
                        </li>
                        <li class="offline"> <!-- 不在线 -->
                            <div class="avatar">
                                <img src="http://img.wxcha.com/m00/98/e2/1defb6b4d898a94b8832287e503a0153.jpg">
                            </div>
                            <div class="nickname">陈沛鑫</div>
                        </li>
                    </ol> <!-- 最终显示名单的区域 -->
                </div>
            </div>
        </div>

    </div>

    <script src="js/index.js"></script>
</body>
</html>